<template>
  <div class="telephone">
    <form action="">
      <table>
        <tr>
          <td data-name="label">中国</td>
          <td>
            <input
              data-name="input"
              type="text"
              :placeholder="Default"
              @focus="val = ''"
              @blur="blurVal($event)"
              :style="{ border: inpBorder }"
              @click="changeBorder"
              v-model="cellNmber"
            />
            <i class="el-icon-success" v-if="cellResults == 2"></i>
          </td>
        </tr>
      </table>
    </form>
    <span style="color: #ccc; font-size: 12px" v-if="cellResults == 0">
      <i class="el-icon-warning-outline"></i>
      验证完成后你可以使用该手机登录或找回密码</span
    >
    <span style="color: red; font-size: 12px" v-else-if="cellResults == 1">
      <i class="el-icon-warning-outline"></i> 格式错误</span
    >
    <span style="color: red; font-size: 12px" v-else-if="cellResults == -1">
      <i class="el-icon-warning-outline"></i> 请输入手机号</span
    >
    <!-- 占位  验证通过后  validation 标签不往上移动-->
    <span>&emsp;</span>
    <div class="validation" @click="validation">点击按钮进行验证</div>
    <!-- 占位-->
    <span>&emsp;</span>
    <div class="nextStep">
      下一步
      <!--下一步遮罩层-->
      <div class="box"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      Default: '建议使用常用手机号',
      inpBorder: '',
      cellNmber: '', // 验证手机号格式
      cellResults: 0 // 返回手机号验证结果  有四种状态 -1（点击按钮验证） 0（默认文字） 1（格式错误） 2 （验证通过）
    }
  },
  mounted() {},
  methods: {
    // 文本框失去焦点事件
    blurVal(event) {
      this.inpBorder = '' // 清除边框
      // 验证手机号是否符合格式
      let cell = /^1[3|4|5|7|8]\d{9}$/
      if (event.target.value == '') {
        this.val = '建议使用常用手机号'
      } else {
        cell.test(this.cellNmber) == true
          ? (this.cellResults = 2)
          : (this.cellResults = 1)
      }
    },
    changeBorder() {
      this.inpBorder = '1px solid #000'
    },
    // 点击按钮验证
    validation() {
      if (this.cellNmber == '') {
        this.cellResults = -1
      }
    }
  }
}
</script>

<style lang="less" scoped>
.telephone {
  height: 48px;
  font-size: 16px;
  margin-top: 48px;
  box-sizing: border-box;

  table {
    /* 表格线条合一 */
    border-collapse: collapse;
    text-align: center;

    td {
      position: relative;
      width: 108px;

      i {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 10px;
        color: #33bb44;
      }

      &:nth-child(2) {
        width: 302px;

        input {
          width: 302px;
          height: 50px;

          border: 1px solid transparent;
          outline: none;
          padding-left: 15px;

          &:hover {
            border: 1px solid #000;
          }
        }
      }

      border: 1px solid #ccc;
    }

    tr {
      height: 52px;
    }
  }

  .validation {
    height: 52px;
    margin-top: 15px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    line-height: 52px;
    text-align: center;
    cursor: pointer;

    &:hover {
      border: 1px solid #000;
    }
  }

  .nextStep {
    position: relative;
    height: 52px;
    line-height: 52px;
    margin-top: 15px;
    text-align: center;
    background: red;
    color: #fff;
    cursor: pointer;

    &:hover {
      .box {
        display: block;
      }
    }
    .box {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      height: 52px;
      width: 100%;
      background: #000;
      opacity: 0.2;
    }
  }
}
</style>
